<template>
    <div class="mod-config">
        <!--  头部   -->
        <div>
            <el-button type="primary" icon="el-icon-document" @click="getPendingApproval()">待审批</el-button>
            <el-button type="success" icon="el-icon-document-checked" @click="getPassApproval()">通过</el-button>
            <el-button type="danger" icon="el-icon-document-remove" @click="getNoPassApproval()">不通过</el-button>
        </div>
        <el-divider></el-divider>
        <!--   主体：表格（基本信息，修改，删除）   -->
        <div class="table">
            <el-table :data="tableData" border style="width: 100%" v-loading="dataListLoading">
                <el-table-column type="index" header-align="center" align="center" width="100" label="序号">
                    <template #default="scope">
                        <span>{{ (currentPage - 1) * pageSize + scope.$index + 1 }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="详情" width="200" align="center">
                    <template slot-scope="scope">
                        <el-button @click="seeDetail(scope.row)" size="small" icon="el-icon-view" type="info">
                            详情
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="applyInfoVo.avater" label="头像" width="180">
                    <template slot-scope="scope">
                        <el-image style="width: 100px; height: 100px" :src="scope.row.applyInfoVo.avater"></el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="applyInfoVo.name" label="姓名" width="150"></el-table-column>
                <el-table-column prop="applyInfoVo.organization.name" label="组织" width="200" align="center"></el-table-column>
                <el-table-column prop="applyInfoVo.job.name" label="岗位" width="200" align="center"></el-table-column>
                <el-table-column prop="applyInfoVo.account" label="账号(手机号)" width="200" align="center"></el-table-column>
                <el-table-column prop="applyInfoVo.email" label="电子邮件" width="230" align="center"></el-table-column>
                <el-table-column prop="applyInfoVo.vx" label="微信" width="230" align="center"></el-table-column>
                <el-table-column prop="applyInfoVo.contact" label="联系方式" width="250" align="center"></el-table-column>
                <el-table-column prop="approvalDict.name" label="审批类型" width="250" align="center"></el-table-column>
                <el-table-column prop="applyReason" label="申请理由" width="250" align="center"></el-table-column>
                <el-table-column prop="certificate" label="提交附件证明" width="250" align="center">
                    <template slot-scope="scope">
                        <el-link :href="scope.row.certificate" target="_blank">查看<i class="el-icon-view el-icon--right"></i> </el-link>
                    </template>
                </el-table-column>
                <el-table-column prop="applyTime" label="申请日期" width="230" align="center"></el-table-column>
                <el-table-column prop="approvalTime" label="审批日期" width="230" align="center" v-if="isApproval"></el-table-column>
                <el-table-column prop="approvalReason" label="审批理由" width="230" align="center" v-if="isApproval"></el-table-column>
                <el-table-column fixed="right" label="操作" width="200" align="center" v-if="!isApproval">
                    <template slot-scope="scope">
                        <el-button @click="passRow(scope.row)" size="small" icon="el-icon-check" type="success">
                            通过
                        </el-button>
                        <el-button @click="noPassRow(scope.row)" size="small" icon="el-icon-close" type="danger">
                            不通过
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    align="left"
                    @current-change="changePage"
                    background
                    layout="total, prev, pager, next"
                    :page-size="pageSize"
                    :current-page="currentPage"
                    :total="total">
            </el-pagination>
            <!--   个人信息弹框   -->
            <el-dialog title="个人信息" :visible.sync="editInfoDialogVisible" :show-close="true"
                       :close-on-click-modal="true" center>
                <el-divider><i class="el-icon-reading"></i></el-divider>
                <!-- 添加类名“dialog-content”以方便统一样式 -->
                <div class="dialog-content">
                    <div class="left-column">
                        <!-- 头像区域 -->
                        <el-image class="user-avatar" :src="currentUserAvatar"
                                  style="width: 150px; height: 150px"></el-image>
                    </div>
                    <div class="right-column">
                        <!-- 用户信息区域 -->
                        <div>
                            <el-tag>姓名：{{ currentUserName }}</el-tag>
                            <el-tag>性别：{{ sex }}</el-tag>
                            <el-tag>生日：{{ birthday }}</el-tag>
                            <el-tag>民族：{{ ethnic }}</el-tag>
                            <el-tag>身份：{{ identity }}</el-tag>
                            <el-tag>组织：{{ organization }}</el-tag>
                            <el-tag>职位：{{ job }}</el-tag>
                            <el-tag>账号：{{ account }}</el-tag>
                            <el-tag>邮箱：{{ email }}</el-tag>
                            <el-tag>微信：{{ vx }}</el-tag>
                            <el-tag>其他联系方式：{{ contact }}</el-tag>
                            <el-tag>入职时间：{{ createTime }}</el-tag>
                            <el-tag>自我介绍：{{ description }}</el-tag>
                            <el-tag>座右铭：{{ motto }}</el-tag>
                        </div>
                    </div>
                </div>
                <el-divider></el-divider>
            </el-dialog>
        </div>
    </div>
</template>
<script>
import dayjs from "dayjs";
import {EventBus} from "@/event-bus";

export default {
    data() {
        return {
            // 当前页
            currentPage: this.$router.currentRoute.query.page ? parseInt(this.$router.currentRoute.query.page) : 1,
            // 员工列表
            tableData: [],
            // 表格加载时动态
            dataListLoading:false,
            //一共有多少页
            pageSize:10,
            //一共有多少条
            total:10,
            //审批阶段
            status:1,
            //是否审批
            isApproval:false,
            // 用于存储定时器ID
            timerId: null,
            //个人信息弹窗可视化
            editInfoDialogVisible:false,
            //当前用户头像
            currentUserAvatar: '',
            //当前用户姓名
            currentUserName: '',
            //生日
            birthday: '',
            //性别
            sex: '',
            //民族
            ethnic: '',
            //身份
            identity: '',
            //组织
            organization: '',
            //岗位
            job: '',
            //账号
            account: '',
            //邮箱
            email: '',
            //微信
            vx: '',
            //其他联系方式
            contact: '',
            //入职时间
            createTime: '',
            //自我介绍
            description: '',
            //座右铭
            motto: ''
        }
    },
    mounted() {
        let that = this;
        that.getDataList();
    },
    methods: {
        // 时间格式化
        dayjs,
        //入职登记查看用户详情
        seeDetail(row) {
            console.log(row);
            this.editInfoDialogVisible = true;
            this.currentUserAvatar = row.applyInfoVo.avater;
            this.currentUserName = row.applyInfoVo.name;
            this.birthday = row.applyInfoVo.birthday;
            this.sex = row.applyInfoVo.sex.name;
            this.ethnic = row.applyInfoVo.ethnic.name;
            this.identity = row.applyInfoVo.identity.name;
            this.organization = row.applyInfoVo.organization.name;
            this.job = row.applyInfoVo.job.name;
            this.account = row.applyInfoVo.account;
            this.email = row.applyInfoVo.email;
            this.vx = row.applyInfoVo.vx;
            this.contact = row.applyInfoVo.contact;
            this.createTime = row.applyInfoVo.createTime;
            this.description = row.applyInfoVo.description;
            this.motto = row.applyInfoVo.motto;
        },
        // 切换分页
        changePage(page) {
            this.currentPage = page;
            this.getDataList();
        },
        //审批信息
        approvalInfo(u, message) {
            let e = u.applyInfoVo;
            let d = u.approvalDict;
            if (e !== null) {
                //申请者姓名
                if (e.name === null || e.name === '') {
                    e.name = message;
                }
                //申请者组织
                if (e.organization === null || e.organization === '') {
                    e.organization = {name: message};
                }
                //申请者岗位
                if (e.job === null || e.job === '') {
                    e.job = {name: message};
                }
                //申请者电话号
                if (e.account === null || e.account === '') {
                    e.account = message;
                }
                //申请者邮箱
                if (e.email === null || e.email === '') {
                    e.email = message;
                }
                //申请者微信
                if (e.vx === null || e.vx === '') {
                    e.vx = message;
                }
                //申请者联系方式
                if (e.contact === null || e.contact === '') {
                    e.contact = message;
                }
            }
            if (d != null) {
                //申请类型
                if (d.name === null || d.name === '') {
                    d.name = message;
                }
            }
            //申请附件
            if (u.certificate === null || u.certificate === '') {
                u.certificate = require('@/assets/noData.png');
            }
            //申请日期
            if (u.applyTime === null) {
                u.applyTime = message;
            } else {
                u.applyTime = dayjs(u.applyTime).format('YYYY-MM-DD HH:mm:ss');
            }
            //申请日期
            if (u.approvalTime === null) {
                u.approvalTime = message;
            } else {
                u.approvalTime = dayjs(u.approvalTime).format('YYYY-MM-DD HH:mm:ss');
            }
            //申请理由
            if (u.applyReason === null || u.applyReason === '') {
                u.applyReason = message;
            }
            //审批理由
            if (u.approvalReason === null || u.approvalReason === '') {
                u.approvalReason = message;
            }
        },
        //获取当前管理的组织下的人员提交的审批的数据列表
        getDataList() {
            let that = this;
            that.$http('/approval', 'POST', {
                approvalId: localStorage.getItem('userId'),
                approvalStatus: that.status,
                pageNum: this.currentPage
            }, (resp) => {
                let data = resp.data;
                console.log(data)
                if (data.code === 20000) {
                    that.tableData = data.data.list;
                    if (data.data.list.length <= 0) {
                        this.currentPage = 1;
                        this.loadData()
                    } else {
                        if (that.status !== 1) {
                            that.isApproval = true;
                        } else {
                            that.isApproval = false;
                        }
                        let message = '暂无';
                        for (let u of that.tableData) {
                            this.approvalInfo(u, message);
                        }
                    }
                    that.currentPage = resp.data.data.currentPage;
                    that.pageSize = resp.data.data.pageSize;
                    that.total = resp.data.data.total;
                }
            });
        },
        //再次加载
        loadData() {
            let that = this;
            that.$http('/approval', 'POST', {
                approvalId: localStorage.getItem('userId'),
                approvalStatus: that.status,
                pageNum: this.currentPage
            }, (resp) => {
                let data = resp.data;
                if (data.code === 20000) {
                    that.tableData = data.data.list;
                    if (data.data.list.length <= 0) {
                        this.currentPage = 1;
                    } else {
                        if (that.status !== 1) {
                            that.isApproval = true;
                        } else {
                            that.isApproval = false;
                        }
                        let message = '暂无';
                        for (let u of that.tableData) {
                            this.approvalInfo(u, message);
                        }
                    }
                    that.currentPage = resp.data.data.currentPage;
                    that.pageSize = resp.data.data.pageSize;
                    that.total = resp.data.data.total;
                }
            });
        },
        //待审批按钮
        getPendingApproval() {
            let that = this;
            that.status = 1;
            that.getDataList();
        },
        //已审批按钮
        getPassApproval() {
            let that = this;
            that.status = 2;
            that.getDataList();
        },
        //未审批按钮
        getNoPassApproval() {
            let that = this;
            that.status = 3;
            that.getDataList();
        },
        //通过审批按钮
        passRow(row) {
            let that = this;
            that.$confirm(`确认通过吗？`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(() => {
                that.$http('/approval/operation', 'PUT', {
                    id: row.id,
                    approvalStatus: 2,
                    approvalType: row.approvalDict.abbreviation
                }, (resp) => {
                    if (resp.data.code === 20000) {
                        that.$message({
                            message: '操作成功',
                            type: 'success'
                        });
                        that.getDataList();
                    }
                });
            }).catch(error => {
            });
        },
        //未通过审批按钮
        noPassRow(row) {
            let that = this;
            that.$prompt('请输入理由，不超过50字', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /^.{1,50}$/,
                inputErrorMessage: '字数太多'
            }).then(({value}) => {
                that.$confirm(`确认不通过吗？`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    that.$http('/approval/operation', 'PUT', {
                        id: row.id,
                        approvalStatus: 3,
                        approvalType: row.approvalDict.abbreviation,
                        approvalReason: value
                    }, (resp) => {
                        if (resp.data.code === 20000) {
                            that.$message({
                                message: '操作成功',
                                type: 'success'
                            });
                            that.getDataList();
                        }
                    });
                }).catch(error => {
                });
            }).catch(() => {
            });

        }
    }
}
</script>
<style lang="less">
.table {
  margin-top: 20px;
}
.dialog-content {
    display: flex;
}

.left-column, .right-column {
    flex: 1;
    padding: 3px;
}

.left-column {
    text-align: center;
}

.user-avatar {
    margin-bottom: 0px;
}
</style>